<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI建议按钮加载状态演示</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 24px;
            margin-bottom: 10px;
        }

        .header p {
            opacity: 0.9;
            font-size: 14px;
        }

        .content {
            padding: 30px;
        }

        .suggestion-card {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .suggestion-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 15px;
        }

        .ai-badge {
            background: #3b82f6;
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }

        .type-badge {
            background: #fef3c7;
            color: #d97706;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }

        .suggestion-content {
            color: #374151;
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 6px;
            min-width: 80px;
            justify-content: center;
        }

        .btn-primary {
            background: #3b82f6;
            color: white;
        }

        .btn-primary:hover:not(:disabled) {
            background: #2563eb;
        }

        .btn-secondary {
            background: #f1f5f9;
            color: #64748b;
        }

        .btn-secondary:hover:not(:disabled) {
            background: #e2e8f0;
        }

        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .loading {
            background: #e5e7eb !important;
            color: #6b7280 !important;
        }

        .spinner {
            width: 14px;
            height: 14px;
            border: 2px solid transparent;
            border-top: 2px solid currentColor;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .demo-controls {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 20px;
            margin-top: 20px;
        }

        .demo-controls h3 {
            margin-bottom: 15px;
            color: #374151;
            font-size: 16px;
        }

        .control-buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .control-btn {
            padding: 8px 16px;
            background: #3b82f6;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 13px;
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .control-btn:hover {
            background: #2563eb;
        }

        .status {
            margin-top: 15px;
            padding: 10px;
            background: #ecfdf5;
            border: 1px solid #a7f3d0;
            border-radius: 6px;
            color: #065f46;
            font-size: 13px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🤖 AI建议按钮加载状态演示</h1>
            <p>体验智能任务管理助手的交互效果</p>
        </div>

        <div class="content">
            <!-- AI建议卡片 -->
            <div class="suggestion-card">
                <div class="suggestion-header">
                    <span class="ai-badge">🤖 AI建议</span>
                    <span class="type-badge">⏰ 时间安排</span>
                </div>
                
                <div class="suggestion-content">
                    建议将任务调整到明天下午3点完成，这样可以更好地安排工作时间，提高效率。
                </div>
                
                <div class="buttons">
                    <button class="btn btn-primary" onclick="handleAction('adjust_date', this)">
                        调整时间
                    </button>
                    <button class="btn btn-primary" onclick="handleAction('elevate_priority', this)">
                        提升优先级
                    </button>
                    <button class="btn btn-secondary" onclick="handleAction('accept', this)">
                        接受建议
                    </button>
                    <button class="btn btn-secondary" onclick="handleAction('dismiss', this)">
                        忽略
                    </button>
                </div>
            </div>

            <!-- 演示控制 -->
            <div class="demo-controls">
                <h3>🎮 演示控制</h3>
                <div class="control-buttons">
                    <button class="control-btn" onclick="resetDemo()">重置演示</button>
                    <button class="control-btn" onclick="simulateSlowAction()">模拟慢速处理</button>
                    <button class="control-btn" onclick="simulateFastAction()">模拟快速处理</button>
                    <button class="control-btn" onclick="simulateError()">模拟错误处理</button>
                </div>
                <div id="status" class="status" style="display: none;">
                    状态信息将在这里显示
                </div>
            </div>
        </div>
    </div>

    <script>
        let isProcessing = false;
        let processingAction = '';

        function showStatus(message, type = 'info') {
            const statusEl = document.getElementById('status');
            statusEl.textContent = message;
            statusEl.style.display = 'block';
            
            // 根据类型设置样式
            statusEl.className = 'status';
            if (type === 'error') {
                statusEl.style.background = '#fef2f2';
                statusEl.style.borderColor = '#fecaca';
                statusEl.style.color = '#991b1b';
            } else if (type === 'success') {
                statusEl.style.background = '#ecfdf5';
                statusEl.style.borderColor = '#a7f3d0';
                statusEl.style.color = '#065f46';
            }
        }

        function setButtonLoading(button, isLoading) {
            if (isLoading) {
                button.disabled = true;
                button.classList.add('loading');
                button.innerHTML = '<div class="spinner"></div><span>处理中</span>';
            } else {
                button.disabled = false;
                button.classList.remove('loading');
                // 恢复原始文本
                const originalText = button.getAttribute('data-original-text') || button.textContent;
                button.innerHTML = originalText;
            }
        }

        function disableAllButtons() {
            const buttons = document.querySelectorAll('.btn');
            buttons.forEach(btn => {
                if (!btn.disabled) {
                    btn.setAttribute('data-original-text', btn.textContent);
                    setButtonLoading(btn, true);
                }
            });
        }

        function enableAllButtons() {
            const buttons = document.querySelectorAll('.btn');
            buttons.forEach(btn => {
                setButtonLoading(btn, false);
            });
        }

        async function handleAction(action, button) {
            if (isProcessing) {
                showStatus('正在处理其他操作，请稍候...', 'error');
                return;
            }

            isProcessing = true;
            processingAction = action;
            
            // 保存原始文本
            button.setAttribute('data-original-text', button.textContent);
            
            // 设置当前按钮为加载状态
            setButtonLoading(button, true);
            
            // 禁用其他按钮
            const buttons = document.querySelectorAll('.btn');
            buttons.forEach(btn => {
                if (btn !== button && !btn.disabled) {
                    btn.setAttribute('data-original-text', btn.textContent);
                    setButtonLoading(btn, true);
                }
            });

            try {
                showStatus(`正在执行: ${action}...`, 'info');
                
                // 模拟不同的处理时间
                let delay = 1000; // 默认1秒
                
                if (action === 'adjust_date') {
                    delay = 3000; // 3秒
                } else if (action === 'elevate_priority') {
                    delay = 2000; // 2秒
                } else if (action === 'accept') {
                    delay = 1500; // 1.5秒
                }
                
                await new Promise(resolve => setTimeout(resolve, delay));
                
                // 模拟成功
                showStatus(`✅ ${action} 执行成功！`, 'success');
                
                // 模拟建议被移除
                setTimeout(() => {
                    const card = button.closest('.suggestion-card');
                    card.style.opacity = '0';
                    card.style.transform = 'translateX(100%)';
                    setTimeout(() => {
                        card.remove();
                        showStatus('建议已处理完成', 'success');
                    }, 300);
                }, 1000);
                
            } catch (error) {
                showStatus(`❌ ${action} 执行失败: ${error.message}`, 'error');
                enableAllButtons();
            } finally {
                isProcessing = false;
                processingAction = '';
            }
        }

        function resetDemo() {
            location.reload();
        }

        function simulateSlowAction() {
            showStatus('模拟慢速处理：AI解析需要较长时间...', 'info');
        }

        function simulateFastAction() {
            showStatus('模拟快速处理：简单操作立即完成...', 'info');
        }

        function simulateError() {
            showStatus('模拟错误处理：网络连接失败或服务器错误...', 'error');
        }

        // 添加一些交互效果
        document.addEventListener('DOMContentLoaded', function() {
            showStatus('演示已准备就绪，点击按钮体验加载状态效果', 'info');
        });
    </script>
</body>
</html>
